<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>
    <script src="./static/data/kml/Earthquake_2012.js"></script>
    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    </style>

    <script type="text/javascript">
    var clusterLayer  = null;
    function init() {
        clusterLayer  = createClusterLayer(eathquake.data);
        //初始化地图容器
        var map = new ol.Map({
            target: 'mapCon',     //地图容器div的ID
            controls: ol.control.defaults({
                attributionOptions: ({
                    collapsible: true
                })
            }),
            interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
                condition: function(evt) {
                return evt.type == 'singleclick' || evt.type == 'pointermove';
                },
                style: selectStyleFunction,
                layers:[clusterLayer],
                wrapX:false
            })]),
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [80,30],  //地图初始中心点
                maxZoom: 28,         //最大瓦片显示级数
                minZoom: 1,          //最小瓦片显示级数
                zoom: 3             //地图初始显示级数
            
            }),
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM({wrapX:false}),
                    opacity: 0.7
                })
            ]
        }); 
        map.addLayer(clusterLayer);
    }

    function createClusterLayer (data){
        var vectorSource = new ol.source.Vector({wrapX:false})
        var features = []
        for (var i in data) {
            var att = parseFloat(data[i].magnitude) ;
            for(var j in data[i].coordinates)
            {
                var newFeature = createFeature([parseFloat(data[i].coordinates[j][0]),parseFloat(data[i].coordinates[j][1])],att);
                features.push(newFeature)
            }

        }
        vectorSource.addFeatures(features)
        var clusterLayer = new ol.layer.Vector({
            source:new ol.source.Cluster({
                distance:40,   //最近的聚合图元距离(单位:像素)
                source:vectorSource,
                wrapX:false
            }),
            style:styleFunction
        });
        return clusterLayer
    }

    function createFeature (coordinates,att) {
        var tFeature =new ol.Feature({
            geometry: new ol.geom["Point"](coordinates)
        });
        tFeature.set('weight', att);
        return tFeature;
    }
    var maxFeatureCount = 0;
    function getMaxFeatureCount()
    {
        var features = clusterLayer.getSource().getFeatures();
        var feature, radius;
        for (var i = features.length - 1; i >= 0; --i) {
            feature = features[i];
            var originalFeatures = feature.get('features');
            maxFeatureCount = Math.max(maxFeatureCount, originalFeatures.length);
        }
    }
    function styleFunction(feature, resolution) {
        var style;
        var size = feature.get('features').length;
        getMaxFeatureCount();
        if (size > 1) {      
            style = new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10+(size/maxFeatureCount)*10,
                    fill: new ol.style.Fill({
                        color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
                    })
                }),
                text: new ol.style.Text({
                    text: size.toString(),
                    fill: new ol.style.Fill({
                        color: '#fff'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(0, 0, 0, 0.6)',
                        width: 3
                    })
                })
            });
        } else {
            var originalFeature = feature.get('features')[0];
            style = new ol.style.Style({
                geometry: originalFeature.getGeometry(),
                image: new ol.style.RegularShape({
                    radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                    radius2: 6,
                    points: 5,
                    angle: 0,
                    fill: new ol.style.Fill({
                        color: 'rgba(0, 250, 0, 0.8)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 204, 0, 0.2)',
                        width: 1
                    })
                })
            });
        }
        return style;
    }

    function selectStyleFunction(feature) {
        var size = feature.get('features').length;
        getMaxFeatureCount();
        var styles = [new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 10+(size/maxFeatureCount)*10,
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.01)'
                    })
                })
            })
        ];
        var originalFeatures = feature.get('features');
        for (var i = originalFeatures.length - 1; i >= 0; --i) {
        originalFeature = originalFeatures[i];
        styles.push(
            new ol.style.Style({
                geometry: originalFeature.getGeometry(),
                image: new ol.style.RegularShape({
                    radius1: 8+(parseFloat(originalFeature.get('weight'))-5)*10,
                    radius2: 6,
                    points: 5,
                    angle: 0,
                    fill: new ol.style.Fill({
                        color: 'rgba(0, 0, 205, 0.8)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255, 204, 0, 0.2)',
                        width: 1
                    })
                })
            })
        );
        }
        return styles;
    }
    </script>
</head>

<body onload="init()">
    <div id="mapCon">
    </div>
</body>

</html>